<script type="text/javascript" >
    stFacebookToolbox.load_tooltip();
    stFacebookToolbox.on_submitform('#settingForm');
    jQuery( "#sortable" ).sortable();
    jQuery( "#sortable" ).disableSelection();
</script>

<div class="w100p bgl">
    <div class="w100p bgr p5b">
                <ul class="menu_right">
                      <li class="current">
                          <a href="javascript:void(0);" onclick="stFacebookToolbox.loadPage('applications');" id="form_app">Form app</a>
                    </li>
                    <li>
                          <a href="javascript:void(0);" onclick="stFacebookToolboxcustom.loadPage('facebook_image_map');" id="fan_count">Info Page app</a>
                    </li>
                </ul>
        <ul class="form_properties" style="width:50%;float:left;cursor: pointer;" onclick='jQuery("#edit_form").slideUp();jQuery("#list_button").slideUp();jQuery("#properties_edit").slideDown();'>
                <li><h2>Untitled Form</h2>
                    <span>This is your form description. Click here to edit.</span>
                </li>
            </ul>
            <div style="width:50%;float:left;margin-bottom: 10px;">
            <ul id="sortable">
                    <li class="ui-state-default" id="show_error" style="background-color: #F3F7FB;border: 2px solid #96B6DA;padding:10px;"><h2 style="color:red;">You have no fields yet!</h2>
                        Click the buttons on the right to add fields to your form.</li>
            </ul>
                <br />
                <a onclick="stFacebookToolboxcustom.save_form();stFacebookToolboxcustom.loading();" style="display:none;" id="save_form" class="button add-new-h2" href="javascript:void(0);">Save</a>
            </div>
            <input type="hidden" id="base_url" value="<?php echo $config['pluginPath'];?>" />
            <input type="hidden" id="count" value="0" />
            <div class="form_add" id="list_button">
                    <ul id="first_column" style="float:left;">
                    <li><a href="javascript:stFacebookToolboxcustom.insert_element('text')" id="single_line_text"><img src="<?php echo $config['pluginPath'] . 'images/';?>button_text/single_line_text.gif"></a></li>
                    <li><a href="javascript:stFacebookToolboxcustom.insert_element('textarea');" id="paragraph_text"><img src="<?php echo $config['pluginPath'] . 'images/';?>button_text/paragraph_text.gif"></a></li>
                    <li><a href="javascript:stFacebookToolboxcustom.insert_element('radio');" id="multiple_choice"><img src="<?php echo $config['pluginPath'] . 'images/';?>button_text/multiple_choice.gif"></a></li>
                    <li><a href="javascript:stFacebookToolboxcustom.insert_element('checkbox');" id="checkboxes"><img src="<?php echo $config['pluginPath'] . 'images/';?>button_text/checkboxes.gif"></a></li>
                    <li><a href="javascript:stFacebookToolboxcustom.insert_element('select');" id="drop_down"><img src="<?php echo $config['pluginPath'] . 'images/';?>button_text/drop_down.gif"></a></li>
                    <li><a href="javascript:stFacebookToolboxcustom.insert_element('option');" id="option"><img src="<?php echo $config['pluginPath'] . 'images/';?>button_text/multi_option_text.jpg"></a></li>

<!--                    <li><a href="javascript:stFacebookToolboxcustom.insert_element('simple_name');" id="name_text"><img src="<?php echo $config['pluginPath'] . 'images/';?>button_text/name.gif"></a></li>
                    <li><a href="javascript:stFacebookToolboxcustom.insert_element('time');" id="time"><img src="<?php echo $config['pluginPath'] . 'images/';?>button_text/time.gif"></a></li>
                    <li><a href="javascript:stFacebookToolboxcustom.insert_element('address');" id="address"><img src="<?php echo $config['pluginPath'] . 'images/';?>button_text/address.gif"></a></li>
                    <li><a href="javascript:stFacebookToolboxcustom.insert_element('currency');" id="price"><img src="<?php echo $config['pluginPath'] . 'images/';?>button_text/price.gif"></a></li>
                    <li><a title="Organize your form." href="javascript:stFacebookToolboxcustom.insert_element('section');" id="section_break"><img src="<?php echo $config['pluginPath'] . 'images/';?>button_text/section_break.gif"></a></li>
                    </ul>-->
                <ul id="second_column" style="float:left;">
<!--                <li><a href="javascript:stFacebookToolboxcustom.insert_element('number');" id="number"><img src="<?php echo $config['pluginPath'] . 'images/';?>button_text/number.gif"></a></li>-->
<!--                <li><a href="javascript:stFacebookToolboxcustom.insert_element('checkbox');" id="checkboxes"><img src="<?php echo $config['pluginPath'] . 'images/';?>button_text/checkboxes.gif"></a></li>
                <li><a href="javascript:stFacebookToolboxcustom.insert_element('select');" id="drop_down"><img src="<?php echo $config['pluginPath'] . 'images/';?>button_text/drop_down.gif"></a></li>-->
<!--                <li><a href="javascript:stFacebookToolboxcustom.insert_element('date');" id="date"><img src="<?php echo $config['pluginPath'] . 'images/';?>button_text/date.gif"></a></li>
                <li><a href="javascript:stFacebookToolboxcustom.insert_element('phone');" id="phone"><img src="<?php echo $config['pluginPath'] . 'images/';?>button_text/phone.gif"></a></li>
                <li><a href="javascript:stFacebookToolboxcustom.insert_element('url');" id="web_site"><img src="<?php echo $config['pluginPath'] . 'images/';?>button_text/web_site.gif"></a></li>
                <li><a href="javascript:stFacebookToolboxcustom.insert_element('email');" id="email"><img src="<?php echo $config['pluginPath'] . 'images/';?>button_text/email.gif"></a></li>
                <li><a href="javascript:stFacebookToolboxcustom.insert_element('file');" id="file_upload"><img src="<?php echo $config['pluginPath'] . 'images/';?>button_text/file_upload.gif"></a></li>-->
                </ul>
            </div>
            <div class="form_add" id="properties_edit" style="display:none;background-color:#F3F7FB;padding:5px;width:500px;margin-left:5px;">
                <ul style="">
                    <li>
                        Form Title
                        <input type="text" id="form_title" style="width:50%" value="Untitled Form" onkeyup="jQuery('.form_properties li h2').html(this.value);">
                    </li>
                    <li>
                        Description
                        <input type="text" id="form_description" style="width:50%" value="This is your form description. Click here to edit." onkeyup="jQuery('.form_properties li span').html(this.value);">
                    </li>
                    <li>
                        Facebook Page
                        <select name="page_id" id="page_id">
                            <?php foreach($page as $row):?>
                            <option value="<?php echo $row->pageid;?>"><?php echo $row->pagename;?>
                           <?php endforeach;?>
                        </select>
                    </li>
                    <li>
                        Success Message <br />
                        <input type="radio" name="success" style="margin-left: 71px;" checked onclick="jQuery('#properties_edit textarea').slideDown();jQuery('#properties_edit input.url').slideUp();">Show Text&nbsp;&nbsp;<input type="radio" name="success" onclick="jQuery('#properties_edit input.url').slideDown();jQuery('#properties_edit textarea').slideUp();">Redirect URL
                    </li>
                    <textarea cols="50" rows="10">Success! Your submission has been saved!</textarea>
                    <br />
                    <input type="text" class="url width_medium" style="display:none;" value="http://" />
                 </ul>
                <a onclick='jQuery("#list_button").slideDown();jQuery("#edit_form").slideUp();jQuery("#properties_edit").slideUp();' style="width:100px;" id="add_another_field" class="button add-new-h2" href="javascript:void(0);">Add Another Field</a>
            
            </div>
            <div class="form_add" id="edit_form" style="display:none;background-color:#F3F7FB;padding:5px;width:500px;margin-left:5px;">
                <span id="edit_id" style="color: #144282;font-size: 187%;float:right;"></span>
                <input type="hidden" id="type" />
                <input type="hidden" id="element_delete" />
                <input type="hidden" id="option_delete" />
                <ul style="">
                    <li>
                        Field Label
                        <input type="text" id="field_label" style="width:50%" onkeyup="jQuery('#title_'+jQuery('#edit_id').html()).html(this.value);">
                    </li>
                    <li>
                        Field Type
                        <select onchange="set_properties(JJ(this).val(), 'type')" tabindex="12" autocomplete="off" id="element_type" class="select full">
                            <option value="text">Single Line Text</option>
                            <option value="textarea">Paragraph Text</option>
                            <option value="radio">Multiple Choice</option>
                            <option value="checkbox">Checkboxes</option>
                            <option value="select">Drop Down</option>
                            <option value="number">Number</option>
                            <option value="simple_name">Name</option>
                            <option value="date">Date</option>
                            <option value="time">Time</option>
                            <option value="phone">Phone</option>
                            <option value="money">Price</option>
                            <option value="url">Web Site</option>
                            <option value="email">Email</option>
                            <option value="address">Address</option>
                            <option value="file">File Upload</option>
                            <option value="section">Section Break</option>
                        </select>
                        <span id="display_field_size">
                        Field Size
                        <select onchange="stFacebookToolboxcustom.set_size(this.value)" tabindex="13" autocomplete="off" id="field_size" class="select full">
                        <option value="small">Small</option>
                        <option value="medium">Medium</option>
                        <option value="large">Large</option>
                        </select>
                        </span>
                    </li>
                    <li id="option_element">
                        Choices <br />
                    </li>
                    <li id="option_element_column">
                        
                    </li>
                    <li id="option_element_row">
                    </li>
                    <li>
                               Rules
                               <div style="margin-left: 35px; font-weight: lighter;"><input type="checkbox" id="require_checkbox" onclick="if(this.checked){jQuery('#require_title_'+jQuery('#edit_id').html()).html(' *')}else{jQuery('#require_title_'+jQuery('#edit_id').html()).html('')}">Required</div>

                            <div style="margin-left: 35px; font-weight: lighter;" id="id_no_duplicates"><input type="checkbox">No Duplicates</div>
                    </li>
                    <li id="display_default_value_form">
                        Default value
                        <input type="text" id="default_value" style="width:50%" onkeyup="jQuery('#default_'+jQuery('#edit_id').html()).val(this.value);">
                    </li>
                    <li>
                        Guidelines for User<br />
                        <textarea cols="38" rows="5" style="margin-left: 77px;" id="element_guidelines" onkeyup="jQuery('#element_guidelines_'+jQuery('#edit_id').html()).val(this.value);"></textarea>
                    </li>
                    
                </ul>
                <a onclick='jQuery("#properties_edit").slideUp();jQuery("#edit_form").slideUp();jQuery("#list_button").slideDown();' style="width:100px;" id="add_another_field" class="button add-new-h2" href="javascript:void(0);">Add Another Field</a>
            </div>

            <br style="clear:both;" />

    </div>
</div>
